<template>
  <div class="nav">
    <router-link to="/goods" class="nav-item">商品</router-link>
    <router-link to="/ratings" class="nav-item">评价</router-link>
    <router-link to="/seller" class="nav-item">商家</router-link>
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../common/css/minxin";

  .nav {
    display: flex;
    padding: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    .border-1px(rgba(7, 12, 27, .1));
    .nav-item {
      flex: 1;
      font-size: 14px;
      color: rgb(77, 85, 93);
      -webkit-font-smoothing:antialiased;
      text-align: center;
    }
    .router-link-active {
      color: rgb(240, 20, 20);
    }
  }
</style>
